<template>
  <div>
    <el-divider></el-divider>
    <el-descriptions title="媒体需求"></el-descriptions>
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="关键词">
        <el-input v-model="form.keyword"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addmedia">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="medialist.list"
      style="width: 100%"
      max-height="550"
      border
    >
      <el-table-column
        prop="id"
        label="编号"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="brandPlacement"
        label="投放品牌"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="brandPlacementTypeName"
        label="投放品牌类型"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="city"
        label="城市"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="mediumType"
        label="媒体类型"
        show-overflow-tooltip
        min-width="150"
      >
      <template slot-scope="scope">
        <div class="medium-type-content">{{ scope.row.mediumType }}</div>
      </template>
    </el-table-column>
      <el-table-column
        prop="orderTime"
        label="预计上刊时间"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="stationType"
        label="资源类型"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        show-overflow-tooltip
        width="150"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ formatterTime(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="操作"
        show-overflow-tooltip
        fixed="right"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="updatehand(scope.row.id)"
            >修改</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div class="global-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="pageNum"
        background
        layout="sizes, total, prev, pager, next"
        :total="medialist.count"
      >
      </el-pagination>
    </div>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="70%">
      <el-form :model="addMsgForm" :rules="addMsgRules" ref="addMsgForm">
        <el-form-item
          label="投放品牌"
          prop="brandPlacement"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addMsgForm.brandPlacement"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="投放品牌类型"
          prop="brandPlacementType"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="addMsgForm.brandPlacementType"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="(item, index) in brandPlacementTypeList"
              :key="index"
              :label="item.sysValueName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="资源类型"
          prop="stationType"
          :label-width="formLabelWidth"
        >
          <el-checkbox-group v-model="addMsgForm.stationType">
            <el-checkbox
              v-for="item in stationTypeList"
              :key="item.value"
              :label="item.label"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="媒体类型"
          prop="mediumType"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addMsgForm.mediumType"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
          <el-input v-model="addMsgForm.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="预计上刊时间"
          prop="orderTime"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addMsgForm.orderTime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input v-model="addMsgForm.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMsgSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/apidetail";
export default {
  props: ["brandPlacementTypeList", "medialist", "parentInfoobj"],
  data() {
    return {
      form: {
        keyword: "",
      },
      addMsgForm: {
        projectId: null,
        brandPlacement: "",
        brandPlacementType: [],
        stationType: [],
        mediumType: "",
        city: "",
        orderTime: "",
        remark: "",
      },
      addMsgRules: {
        brandPlacement: {
          required: true,
          message: "请输入媒体类型名称",
          trigger: "blur",
        },
        brandPlacementType: {
          required: true,
          message: "请选择投放品牌类型",
          trigger: "change",
        },
        stationType: {
          required: true,
          message: "请选择资源类型",
          trigger: "change",
        },
        mediumType: {
          required: true,
          message: "请输入媒体类型",
          trigger: "blur",
        },
        city: { required: true, message: "请输入城市", trigger: "blur" },
        orderTime: {
          required: true,
          message: "请输入预计上刊时间",
          trigger: "blur",
        },
      },
      stationTypeList: [
        {
          label: "自营",
          value: "自营",
        },
        {
          label: "外采",
          value: "外采",
        },
      ],
      dialogVisible: false,
      formLabelWidth: "120px",
      title: "",
      pageNum: 1,
      pageSize: 10,
      pageSizes: [10, 15, 20],
    };
  },
  methods: {
    addmedia() {
      this.dialogVisible = true;
      this.title = "新增";
      this.addMsgForm = {
        projectId: null,
        brandPlacement: this.parentInfoobj.brandPlacement,
        brandPlacementType: [],
        stationType: [],
        mediumType: "",
        city: "",
        orderTime: "",
        remark: "",
      };
    },
    search(){
this.$emit('update-list',{keyword:this.form.keyword,pageNum: this.pageNum, pageSize: this.pageSize })
    },
    addMsgSubmit() {
      this.$refs["addMsgForm"].validate((valid) => {
        if (valid) {
          const params = this.addMsgForm;
          const projectId = this.$ls.get("projectId");
          params.projectId = projectId;
          if (
            Array.isArray(params.stationType) &&
            params.stationType.length > 0
          ) {
            params.stationType = params.stationType.join(",");
          }
          if (
            Array.isArray(params.brandPlacementType) &&
            params.brandPlacementType.length > 0
          ) {
            params.brandPlacementType = params.brandPlacementType.join(",");
          }
          params.token = this.$store.state.token;

          const methodFun =
            this.title == "新增"
              ? API.addProjectMediaRequirements
              : API.updateProjectMediaRequirements;
          methodFun(params).then((res) => {
            if (res.key == 1000) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.$emit("update-list");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    formatterTime(time) {
      return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
    },
    // 分页pageSize改变
    handleSizeChange(e) {
      this.pageSize = e;
      this.$emit("update-list",{ pageNum: this.pageNum, pageSize: this.pageSize });
    },
    // 分页pageNum改变
    handleCurrentChange(e) {
      this.pageNum = e;
      this.$emit("update-list", { pageNum: this.pageNum, pageSize: this.pageSize });
    },

    updatehand(id) {
      this.title = "修改";
      this.dialogVisible = true;
      if(id){
        let params = {
            id:id
        }
        API.getProjectMediaRequirementsDetails(params).then(res=>{
            if(res.key == 1000){
this.addMsgForm = res.result.data;
 // 处理投放品牌类型（字符串转数组）
 if (typeof this.addMsgForm.brandPlacementType === 'string') {
          this.addMsgForm.brandPlacementType = this.addMsgForm.brandPlacementType
            .split(',')
            .map(Number); // 将每个字符串元素转为数字
        }
        
        //资源类型（字符串转数组）
        if (typeof this.addMsgForm.stationType === 'string') {
          this.addMsgForm.stationType = this.addMsgForm.stationType.split(',');
        }
            }
        })
      }
    },
  },
};
</script>

<style scoped>
.el-descriptions__title{
  margin-left: 12px!important;
}

.global-page{
    margin: 20px 0;
}

.medium-type-content{
  white-space: normal;
  word-wrap: break-word;
}
</style>
